<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <!-- hexo-inject:begin --><!-- hexo-inject:end --><meta charset="utf-8">
    <meta name="keywords" content="CSS3, HTML,CSS,JavaScript,JQuery,React,Vue.js等">
    <meta name="description" content="别做一个Vue api调用师">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>CSS3 | zihao blog</title>
    <link rel="icon" type="image/png" href="/pride-blog/favicon.png">

    <link rel="stylesheet" type="text/css" href="/pride-blog/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/pride-blog/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/pride-blog/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/pride-blog/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/pride-blog/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/pride-blog/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/pride-blog/css/my.css">

    <script src="/pride-blog/libs/jquery/jquery.min.js"></script>

<meta name="generator" content="Hexo 5.3.0"><link rel="stylesheet" href="/pride-blog/css/prism-tomorrow.css" type="text/css"><!-- hexo-inject:begin --><!-- hexo-inject:end --></head>




<body>
    <!-- hexo-inject:begin --><!-- hexo-inject:end --><header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/pride-blog/" class="waves-effect waves-light">
                    
                    <img src="/pride-blog/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">zihao blog</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/pride-blog/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/pride-blog/categories/CSS/" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/pride-blog/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/pride-blog/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">zihao blog</div>
        <div class="logo-desc">
            
            别做一个Vue api调用师
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/pride-blog/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/pride-blog/categories/CSS/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			分类
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/pride-blog/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        
    </ul>
</div>


        </div>

        
    </nav>

</header>

    



<div class="bg-cover pd-header post-cover" style="background-image: url('/pride-blog/medias/featureimages/8.jpg')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 class="description center-align post-title">CSS3</h1>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="post-container content">

    
    <link rel="stylesheet" href="/pride-blog/libs/tocbot/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        width: 345px;
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        padding: 35px 0 15px 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content {
        padding-bottom: 30px;
        overflow: auto;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;

        position: absolute;
        right: 23.5vw;
        display: block;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/pride-blog/tags/%E6%AF%8F%E5%A4%A9%E4%B8%80%E4%B8%AA%E7%A6%BB%E8%81%8C%E5%B0%8F%E6%8A%80%E5%B7%A7/">
                                <span class="chip bg-color">每天一个离职小技巧</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/pride-blog/categories/%E6%AF%8F%E5%A4%A9%E4%B8%80%E4%B8%AA%E7%A6%BB%E8%81%8C%E5%B0%8F%E6%8A%80%E5%B7%A7/" class="post-category">
                                每天一个离职小技巧
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i>发布日期:&nbsp;&nbsp;
                    2021-08-04
                </div>
                

                

                

                

                
            </div>
        </div>
        <hr class="clearfix">

        

        

        <div class="card-content article-card-content">
            <div id="articleContent">
                <h5 id="2-CSS3新增伪类有那些？"><a href="#2-CSS3新增伪类有那些？" class="headerlink" title="2.CSS3新增伪类有那些？"></a>2.<code>CSS3</code>新增伪类有那些？</h5><h4 id="p-first-of-type"><a href="#p-first-of-type" class="headerlink" title="p:first-of-type"></a>p:first-of-type</h4><p>选择属于其⽗元素的⾸个 <code>&lt;p&gt;</code> 元素的每个 <code>&lt;p&gt;</code> 元素。</p>
<h4 id="p-last-of-type"><a href="#p-last-of-type" class="headerlink" title="p:last-of-type"></a>p:last-of-type</h4><p>选择属于其⽗元素的最后 <code>&lt;p&gt;</code> 元素的每个 <code>&lt;p&gt;</code> 元素。</p>
<h4 id="p-only-of-type"><a href="#p-only-of-type" class="headerlink" title="p:only-of-type"></a>p:only-of-type</h4><p>选择属于其⽗元素唯⼀的 <code>&lt;p&gt;</code> 元素的每个 <code>&lt;p&gt;</code> 元素。</p>
<h4 id="p-only-child"><a href="#p-only-child" class="headerlink" title="p:only-child"></a>p:only-child</h4><p>选择属于其⽗元素的唯⼀⼦元素的每个 <code>&lt;p&gt;</code> 元素。</p>
<h4 id="p-nth-child-2"><a href="#p-nth-child-2" class="headerlink" title="p:nth-child(2)"></a>p:nth-child(2)</h4><p>选择属于其⽗元素的第⼆个⼦元素的每个 <code>&lt;p&gt;</code> 元素。</p>
<h4 id="after"><a href="#after" class="headerlink" title=":after"></a>:after</h4><p>在元素之前添加内容,也可以⽤来做清除浮动。</p>
<h4 id="before"><a href="#before" class="headerlink" title=":before"></a>:before</h4><p>在元素之后添加内容。</p>
<h4 id="enabled"><a href="#enabled" class="headerlink" title=":enabled"></a>:enabled</h4><p>已启⽤的表单元素。</p>
<h4 id="disabled"><a href="#disabled" class="headerlink" title=":disabled"></a>:disabled</h4><p>已禁⽤的表单元素。</p>
<h4 id="checked"><a href="#checked" class="headerlink" title=":checked"></a>:checked</h4><p>单选框或复选框被选中。</p>
<h5 id="3-div水平垂直居中几种方式"><a href="#3-div水平垂直居中几种方式" class="headerlink" title="3.div水平垂直居中几种方式"></a>3.<code>div</code>水平垂直居中几种方式</h5><pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>child<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>1）使用 position + transform，不定宽高时</p>
<pre class=" language-CSS"><code class="language-CSS">.parent&#123;
    position: relative;
&#125;
.child&#123;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
&#125;</code></pre>
<p>2）使用 position + transform，有宽高时</p>
<pre class=" language-CSS"><code class="language-CSS">.parent&#123;
    position: relative;
&#125;
.child&#123;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
&#125;</code></pre>
<p>3）使用 flex</p>
<pre class=" language-CSS"><code class="language-CSS">.parent&#123;
    display: flex;
    align-items: center;
    justify-content: center;
&#125;</code></pre>
<p>或者</p>
<pre class=" language-CSS"><code class="language-CSS">.parent&#123;
    display: flex;
    align-items: center;
&#125;
.child&#123;
    margin: 0 auto;
&#125;</code></pre>
<p>或者</p>
<pre class=" language-CSS"><code class="language-CSS">.parent&#123;
    display: flex;
&#125;
.child&#123;
    margin: auto;
&#125;</code></pre>
<p>4）使用 position</p>
<pre class=" language-CSS"><code class="language-CSS">.parent&#123;
    position: relative;
&#125;
.child&#123;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
&#125;</code></pre>
<p>5）使用 flex;</p>
<pre class=" language-CSS"><code class="language-CSS">div.parent&#123;
  display:flex;
&#125;
div.child&#123;
  margin:auto;
&#125;</code></pre>
<h5 id="4-什么是BFC-Block-Formatting-Context"><a href="#4-什么是BFC-Block-Formatting-Context" class="headerlink" title="4.什么是BFC(Block Formatting Context)"></a>4.什么是<code>BFC</code>(Block Formatting Context)</h5><p><code>BFC</code>，也叫块级格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。</p>
<p>具有 <code>BFC</code> 特性的元素可以看作是隔离了的独立容器，容器里面的元素的布局不会影响到外面的元素。</p>
<p>通俗一点来讲，可以把 <code>BFC</code> 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。</p>
<p>此外，BFC 具有普通容器所没有的一些特性。诸如：同一个 <code>BFC</code> 下外边距会发生折叠、<code>BFC</code> 可以包含浮动的元素（清除浮动）、<code>BFC</code> 可以阻止元素被浮动元素覆盖。</p>
<p>只要元素满足下面任一条件即可触发 <code>BFC</code> 特性：</p>
<ul>
<li>body 根元素</li>
<li>浮动元素：float 除 none 以外的值</li>
<li>绝对定位元素：position (absolute、fixed)</li>
<li>display 为 inline-block、table-cells、flex</li>
<li>overflow 除了 visible 以外的值 (hidden、auto、scroll)</li>
</ul>
<h5 id="5-CSS单位有哪些？"><a href="#5-CSS单位有哪些？" class="headerlink" title="5.CSS单位有哪些？"></a>5.<code>CSS</code>单位有哪些？</h5><p>px、%、em、rem、v 系单位（vw、vh、vmin、vmax）、单位运算 calc()</p>
<h5 id="6-如何减少回流，重排"><a href="#6-如何减少回流，重排" class="headerlink" title="6.如何减少回流，重排?"></a>6.如何减少回流，重排?</h5><p>浏览器本身的优化策略：</p>
<p>浏览器会维护 1 个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会<code>flush</code>队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。但有时候我们写的一些代码可能会强制浏览器提前 flush 队列，这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些 <code>style</code>信息的时候，就会让浏览器<code>flush</code>队列。</p>
<p>减少对<code>render tree</code>的操作（合并多次多 DOM 和样式的修改），并减少对一些<code>style</code>信息的请求，尽量利用好浏览器的优化策略</p>
<p>1、将多次改变样式属性的操作合并成一次操作。</p>
<p>2、将需要多次重排的元素，<code>position</code>属性设为<code>absolute</code>或<code>fixed</code>，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。</p>
<p>3、在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的<code>html</code>片段，再一次性添加到文档中去，而不是循环添加每一行。</p>
<p>4、由于<code>display</code>属性为<code>none</code>的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发 2 次重排。</p>
<p>5、在需要经常取那些引起浏览器重排的属性值时，要缓存到变量。</p>
<h5 id="7-什么是1px像素问题，如何解决"><a href="#7-什么是1px像素问题，如何解决" class="headerlink" title="7.什么是1px像素问题，如何解决?"></a>7.什么是<code>1px</code>像素问题，如何解决?</h5><h5 id="原因："><a href="#原因：" class="headerlink" title="原因："></a>原因：</h5><p>我们做移动端页面时一般都会设置<code>meta</code>标签<code>viewport</code>的<code>content=width=device-width</code>，这里就是把 html 视窗大小设置等于设备的大小，大多数手机的屏幕设备宽度都差不多，以<code>iphoneX</code>为例，屏幕宽度<code>375px</code>。</p>
<p>而<code>UI</code>给设计图的时候基本上都是给的二倍图甚至三倍图，假设设计图是<code>750px</code>的二倍图，在<code>750px</code>上设计了<code>1px</code>的边框，要拿到<code>375px</code>宽度的手机来显示，就相当于缩小了一倍，所以 1px 的边框要以 0.5px 来呈现才符合预期效果，然而<code>css</code>里最低只支持 1px 大小，不足<code>1px</code>就以<code>1px</code>显示，所以你看到的就显得边框较粗，实际上只是设计图整体缩小了，而边框粗细没有跟着缩小导致的。（<code>ps：ios</code>较新版已经支持<code>0.5px</code>了，这里暂且忽略）</p>
<p>简而言之就是：多倍的设计图设计了<code>1px</code>的边框，在手机上缩小呈现时，由于<code>css</code>最低只支持显示<code>1px</code>大小，导致边框太粗的效果。</p>
<h5 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法:"></a>解决方法:</h5><p><code>transform: scale(0.5)</code> 方案 - 推荐: 很灵活</p>
<p>1.) 设置<code>height: 1px</code>，根据媒体查询结合<code>transform</code>缩放为相应尺寸。</p>
<pre class=" language-css"><code class="language-css">div &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">1</span>px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#000</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<p>2.) 用<code>::after</code>和<code>::befor</code>,设置<code>border-bottom：1px solid #000</code>,然后在缩放<code>-webkit-transform: scaleY(0.5)</code>;可以实现两根边线的需求</p>
<pre class=" language-css"><code class="language-css"><span class="token property">div</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#000</span><span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<p>3.) 用<code>::after</code>设置<code>border：1px solid #000</code>; <code>width:200%</code>; <code>height:200%</code>,然后再缩放<code>scaleY(0.5)</code>; 优点可以实现圆角，京东就是这么实现的，缺点是按钮添加<code>active</code>比较麻烦。</p>
<pre class=" language-css"><code class="language-css"><span class="token number">.</span><span class="token property">div</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200%</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">200%</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#bfbfbf</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
  <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">0.5</span>, <span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">0.5</span>, <span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-transform-origin</span><span class="token punctuation">:</span> top left<span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<h4 id="方法二"><a href="#方法二" class="headerlink" title="方法二:"></a>方法二:</h4><p>媒体查询 + transfrom 对方案 1 的优化</p>
<pre class=" language-css"><code class="language-css"><span class="token comment" spellcheck="true">/* 2倍屏 */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span> &amp;#123<span class="token punctuation">;</span></span>
  <span class="token number">.</span><span class="token property">border-bottom</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  &amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">/* 3倍屏 */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span><span class="token punctuation">:</span> 3<span class="token punctuation">)</span> &amp;#123<span class="token punctuation">;</span></span>
  <span class="token number">.</span><span class="token property">border-bottom</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span><span class="token number">0.33</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span><span class="token number">0.33</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  &amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<h4 id="8-display有哪些值？说明他们的作用"><a href="#8-display有哪些值？说明他们的作用" class="headerlink" title="8.display有哪些值？说明他们的作用"></a>8.<code>display</code>有哪些值？说明他们的作用</h4><ul>
<li><p>none 元素不显示，并从文档流中移除。</p>
</li>
<li><p>inherit 从父元素继承 display 属性的值。</p>
</li>
<li><p>block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。</p>
</li>
<li><p>line 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。</p>
</li>
<li><p>list-item 像块类型元素一样显示，并添加样式列表标记。</p>
</li>
<li><p>inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。</p>
</li>
<li><p>table 作为块级表格来显示。</p>
</li>
<li><p>flex 弹性元素如何伸长或缩短以适应 flex 容器中的可用空间。</p>
</li>
<li><p>grid 网格布局</p>
</li>
</ul>
<h4 id="9-浏览器兼容性有哪些？"><a href="#9-浏览器兼容性有哪些？" class="headerlink" title="9.浏览器兼容性有哪些？"></a>9.浏览器兼容性有哪些？</h4><p>1.浏览器默认的 <code>margin</code> 和 <code>padding</code> 不同</p>
<h4 id="解决："><a href="#解决：" class="headerlink" title="解决："></a>解决：</h4><p>加一个全局 <code>*&#123; margin: 0; padding: 0; &#125;</code>来统一</p>
<p>2.谷歌中文界面下默认会将小于 12px 的文本强制按照<code>12px</code>显示</p>
<h4 id="解决：-1"><a href="#解决：-1" class="headerlink" title="解决："></a>解决：</h4><p>使用<code>-webkit-transform:scale(.75)</code>;收缩的是整个<code>span</code>盒子大小，这时候，必须将 span 准换成块元素。</p>
<p>3.超链接访问过后<code>hover</code>样式就不会出现了，被点击访问过的超链接样式不再具有<code>hover</code> 和<code>active</code> 了</p>
<p>解决：改变<code>css</code> 属性的排列顺序<code>L-V-H-A</code></p>
<h4 id="10-：：before-和：after的区别？"><a href="#10-：：before-和：after的区别？" class="headerlink" title="10.：：before 和：after的区别？"></a>10.<code>：：before</code> 和：<code>after</code>的区别？</h4><h4 id="："><a href="#：" class="headerlink" title="："></a><code>：</code></h4><p>伪类,用于向某些选择器添加特殊的效果。(css2 提出)</p>
<h4 id="：："><a href="#：：" class="headerlink" title="：："></a><code>：：</code></h4><p>伪元素,用于将特殊的效果添加到某些选择器（css3 提出,目的是和伪类区分开）</p>
<h4 id="常见伪类"><a href="#常见伪类" class="headerlink" title="常见伪类:"></a>常见伪类:</h4><ul>
<li>hover,</li>
<li>:link,</li>
<li>:active,</li>
<li>:target,</li>
<li>:not(),</li>
<li>:focus。</li>
</ul>
<h4 id="常见伪元素"><a href="#常见伪元素" class="headerlink" title="常见伪元素"></a>常见伪元素</h4><ul>
<li>::first-letter,</li>
<li>::first-line,</li>
<li>::before,</li>
<li>::after,</li>
<li>::selection。</li>
</ul>
<p>所有支持 <code>::</code> 语法的浏览器都会支持 <code>:</code> 语法，但 IE8 只支持单冒号。建议使用单冒号，以获得最佳的浏览器支持 <code>.</code></p>
<p>伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。</p>
<p>：before /：after 这两个伪类下特有的属性 <strong>content</strong> ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。<br>注：伪元素可用来清除浮动</p>
<h4 id="11-清除浮动的⼏种⽅式，各⾃的优缺点"><a href="#11-清除浮动的⼏种⽅式，各⾃的优缺点" class="headerlink" title="11.清除浮动的⼏种⽅式，各⾃的优缺点"></a>11.清除浮动的⼏种⽅式，各⾃的优缺点</h4><ul>
<li>⽗级 <code>div</code> 定义 <code>height</code></li>
<li>结尾处加空 <code>div</code> 标签 <code>clear:both</code></li>
<li>⽗级 <code>div</code> 定义伪类 <code>:after</code> 和 <code>zoom</code></li>
<li>⽗级 <code>div</code> 定义 <code>overflow:hidden</code></li>
<li>⽗级 <code>div</code> 也浮动，需要定义宽度 结尾处加 <code>br</code> 标签 <code>clear:both</code></li>
</ul>
<h4 id="12-css3有哪些新特性"><a href="#12-css3有哪些新特性" class="headerlink" title="12.css3有哪些新特性"></a>12.<code>css3</code>有哪些新特性</h4><ul>
<li>新增各种 <code>css</code> 选择器 圆⻆ <code>border-radius</code></li>
<li>多列布局</li>
<li>阴影和反射 ⽂字特效 <code>text-shadow</code></li>
<li>线性渐变 旋转 <code>transform</code></li>
</ul>
<h4 id="13-position的值，-relative和absolute定位原点是"><a href="#13-position的值，-relative和absolute定位原点是" class="headerlink" title="13.position的值， relative和absolute定位原点是?"></a>13.<code>position</code>的值， <code>relative</code>和<code>absolute</code>定位原点是?</h4><ul>
<li>absolute ：⽣成绝对定位的元素，相对于 <code>static</code> 定位以外的第⼀个⽗元素进⾏定位</li>
<li>fixed ：⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位</li>
<li>relative ：⽣成相对定位的元素，相对于其正常位置进⾏定位</li>
<li>static 默认值。没有定位，元素出现在正常的流中</li>
<li>inherit 规定从⽗元素继承 <code>position</code> 属性的值</li>
</ul>
<h4 id="14-link与-import的区别"><a href="#14-link与-import的区别" class="headerlink" title="14.link与@import的区别"></a>14.<code>link</code>与<code>@import</code>的区别</h4><ol>
<li><code>link</code> 是 <code>HTML</code> ⽅式， <code>@import</code> 是<code>CSS</code>⽅式</li>
<li><code>link</code> 最⼤限度⽀持并⾏下载， <code>@import</code> 过多嵌套导致串⾏下载，出现 <code>FOUC</code> (⽂档样式 短暂失效)</li>
<li><code>link</code> 可以通过 <code>rel=&quot;alternate stylesheet&quot;</code> 指定候选样式</li>
<li>浏览器对 <code>link</code> ⽀持早于 <code>@import</code> ，可以使⽤ <code>@import</code> 对⽼浏览器隐藏样式</li>
<li><code>@import</code> 必须在样式规则之前，可以在<code>css</code>⽂件中引⽤其他⽂件</li>
<li>总体来说： <code>link</code> 优于 <code>@import</code></li>
</ol>
<h4 id="15-居中为什么要使用transform（为什么不使用marginLeft-Top）"><a href="#15-居中为什么要使用transform（为什么不使用marginLeft-Top）" class="headerlink" title="15.居中为什么要使用transform（为什么不使用marginLeft/Top）"></a>15.居中为什么要使用<code>transform</code>（为什么不使用<code>marginLeft</code>/<code>Top</code>）</h4><blockquote>
<p>我们主要还是从浏览器渲染的性能方面考虑。</p>
</blockquote>
<h4 id="原因"><a href="#原因" class="headerlink" title="原因"></a>原因</h4><p>1.<code>marign</code>：外边距，定义元素周围的空间；简言之，可以改变元素的位移。在浏览器页面渲染的时候，<code>margin</code>可以控制元素的位置，也就是说，改变<code>margin</code>，就会改变<code>render tree</code>的结构，必定会引起页面<code>layout</code>回流和<code>repaint</code>重绘。</p>
<p>2.<code>transform</code>是通过创建一个<code>RenderLayers</code>合成层，拥有独立的<code>GraphicsLayers</code>。每一个<code>GraphicsLayers</code>都有一个<code>Graphics Context</code>，其对应的<code>RenderLayers</code>会<code>paint</code>进<code>Graphics Context</code>中。合成器（<code>Compositor</code>）最终会负责将由<code>Graphics Context</code>输出的位图合并成最终屏幕展示的图案。</p>
<h4 id="结果"><a href="#结果" class="headerlink" title="结果:"></a>结果:</h4><p><code>transform</code>发生在<code>Composite Layer</code>这一步，它所引起的<code>paint</code>也只是发生在单独的<code>GraphicsLayer</code>中，并不会引起整个页面的回流重绘</p>
<p>因此，从浏览器性能考虑，<code>transform</code>会比<code>margin</code>更省时间。</p>
<h4 id="16-前端需要注意哪些SEO"><a href="#16-前端需要注意哪些SEO" class="headerlink" title="16.前端需要注意哪些SEO"></a>16.前端需要注意哪些<code>SEO</code></h4><h3 id="什么是-SEO？"><a href="#什么是-SEO？" class="headerlink" title="什么是 SEO？"></a>什么是 SEO？</h3><p><code>SEO</code>（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益。</p>
<p>1.合理的<code>title</code>，<code>description</code>，<code>keywords</code>：搜索对三个的权重逐个减小，<code>title</code>值强调重点即可，重点词出现不要超过两次，而且要靠前，不同页面的<code>title</code>要有所不同。<code>description</code>把页面内容高度概括，长度合适，不要过分堆砌关键词，不同页面<code>description</code>有所不同，<code>keywords</code>列出重要关键词即可</p>
<p>2.语义化<code>HTML</code>代码，符合<code>W3C</code>规范，语义化代码让搜索引擎容易理解网页</p>
<p>3.重要<code>HTML</code>代码放在前面：搜索引擎抓取<code>HTML</code>顺序是从上到下，有的搜索引擎对于抓取长度有限制，保证重要内容一定会被抓取</p>
<p>4.重点内容不要用<code>JS</code>输出，爬虫不会执行<code>JS</code>获取内容</p>
<p>5.少用<code>iframe</code>：搜索引擎不会抓取<code>iframe</code>中的内容</p>
<p>6.非装饰性图片必须要加<code>alt</code></p>
<p>7.提高网站速度，网站速度是搜索引擎排序的一个重要指标</p>
<h5 id="17-伪元素和伪类的区别是什么？"><a href="#17-伪元素和伪类的区别是什么？" class="headerlink" title="17.伪元素和伪类的区别是什么？"></a>17.伪元素和伪类的区别是什么？</h5><h4 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h4><p>1.伪元素：伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过<code>:before</code>来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。</p>
<p>2.伪类：伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过<code>:hover</code>来描述这个元素的状态。虽然它和普通的<code>css</code>类相似，可以为已有的元素添加样式，但是它只有处于<code>dom</code>树无法描述的状态下才能为元素添加样式，所以将其称为伪类。</p>
<h4 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h4><p>1.伪元素和伪类都不会出现在源文档或者文档树中</p>
<p>2.伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面</p>
<p>3.伪元素名和伪类名都是大小写不敏感的</p>
<p>⑷ 有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）。</p>
<h4 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h4><p>1.伪类的操作对象是文档树中已有的元素。</p>
<p>2.伪元素则创建了一个文档数外的元素。</p>
<p>3.伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。</p>
<h4 id="一句话通俗描述"><a href="#一句话通俗描述" class="headerlink" title="一句话通俗描述"></a>一句话通俗描述</h4><p><code>伪元素</code>和<code>伪类</code>都带一个<code>伪</code>字，那是他们的共同点，所以，他们的区别就是一个本质上是元素，另一个本质上是类。</p>
<h5 id="18-什么是响应式布局？"><a href="#18-什么是响应式布局？" class="headerlink" title="18.什么是响应式布局？"></a>18.什么是响应式布局？</h5><p><img src="https://yangyunhaiimagesoss.oss-cn-shanghai.aliyuncs.com/2009121551_1599897102484.1460000021929516[1]"></p>
<p>通俗来说，响应式布局就是做一个网站同时能兼容多个终端，由一个网站转变成多个网站，为我们大大节省了资源。</p>
<p>响应式界面有四个层次：</p>
<p>1、同一页面在不同大小和比例上看起来都应该是舒适的；</p>
<p>2、同一页面在不同分辨率上看起来都应该是合理的；</p>
<p>4、同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；</p>
<p>5、同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。</p>
<p>在知道了响应式布局是什么后，我们再来简单说一说响应式布局的用法</p>
<p>1、布局及设置<code>meta</code>标签</p>
<p>当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局；比如，在手机设备上，我们要禁止用户来缩放屏幕。不禁止的话，可能在显示上会造成错位，以及显示的不是手机网站的样式。所以，我们要通过代码来禁止用户在手机端上缩放屏幕，已达到正常的手机网站效果。</p>
<p>2、通过媒体查询来设置样式<code>media query</code></p>
<p><code>media query</code> 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于<code>980px</code>，那么可以这样写，这个时候的布局会覆盖掉之前设置的布局。</p>
<p>3、设置多种视图宽度</p>
<p>4、响应式的图片</p>
<p>响应式布局的用法在这里就简单介绍一下，对于响应式的深入了解大家可以关注我们的相关栏目进行学习！！！</p>
<p>以上就是响应式布局是什么？响应式布局的介绍的详细内容，希望对你有所帮助，欢迎关注我们，来获取更多的资源。</p>
<h4 id="19-移动端border-1px-问题"><a href="#19-移动端border-1px-问题" class="headerlink" title="19.移动端border 1px 问题"></a>19.移动端<code>border 1px</code> 问题</h4><blockquote>
<p>加入如下 sass 文件</p>
</blockquote>
<pre class=" language-css"><code class="language-css"><span class="token comment" spellcheck="true">/*单条border样式*/</span>
<span class="token atrule"><span class="token rule">@mixin</span> <span class="token function">border-1px</span><span class="token punctuation">(</span>$color, $direction<span class="token punctuation">)</span> &amp;#123<span class="token punctuation">;</span></span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> $color<span class="token punctuation">;</span>
  <span class="token atrule"><span class="token rule">@if</span> $direction == left &amp;#123<span class="token punctuation">;</span></span>
    <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">2</span>px<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform-origin</span><span class="token punctuation">:</span> left <span class="token number">0</span><span class="token punctuation">;</span>
  &amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
  <span class="token atrule"><span class="token rule">@if</span> $direction == right &amp;#123<span class="token punctuation">;</span></span>
    <span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">2</span>px<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform-origin</span><span class="token punctuation">:</span> right <span class="token number">0</span><span class="token punctuation">;</span>
  &amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
  <span class="token atrule"><span class="token rule">@if</span> $direction == bottom &amp;#123<span class="token punctuation">;</span></span>
    <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">2</span>px<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> bottom<span class="token punctuation">;</span>
  &amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
  <span class="token atrule"><span class="token rule">@if</span> $direction == top &amp;#123<span class="token punctuation">;</span></span>
    <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">2</span>px<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> top<span class="token punctuation">;</span>
  &amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/*四条border样式*/</span>
<span class="token atrule"><span class="token rule">@mixin</span> <span class="token function">all-border-1px</span><span class="token punctuation">(</span>$color, $radius<span class="token punctuation">)</span> &amp;#123<span class="token punctuation">;</span></span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">2</span>px solid $color<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> $radius * <span class="token number">2</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200%</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">200%</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-transform-origin</span><span class="token punctuation">:</span> left top<span class="token punctuation">;</span>
  <span class="token property">transform-origin</span><span class="token punctuation">:</span> left top<span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<h5 id="20-为什么图片在安卓上，有些设备模糊问题"><a href="#20-为什么图片在安卓上，有些设备模糊问题" class="headerlink" title="20.为什么图片在安卓上，有些设备模糊问题"></a>20.为什么图片在安卓上，有些设备模糊问题</h5><p>用同等比例的图片在 PC 机上很清楚，但是手机上很模糊，原因是什么呢？</p>
<p>经过研究，是<code>devicePixelRatio</code>作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把<code>iPhone 4</code>的<code>960*640</code>分辨率，在网页里只显示了<code>480*320</code>，这样<code>devicePixelRatio＝2</code>。现在<code>android</code>比较乱，有<code>1.5</code>的，有<code>2</code>的也有<code>3</code>的。</p>
<p>想让图片在手机里显示更为清晰，必须使用 2x 的背景图来代替 img 标签（一般情况都是用 2 倍）。例如一个<code>div</code>的宽高是<code>100*100</code>，背景图必须得<code>200*200</code>，然后<code>background-size:contain</code>;，这样显示出来的图片就比较清晰了。</p>
<p>代码可以如下：</p>
<pre class=" language-css"><code class="language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url(../images/icon/all.png)</span> no-repeat center center<span class="token punctuation">;</span>
<span class="token property">-webkit-background-size</span><span class="token punctuation">:</span> <span class="token number">50</span>px <span class="token number">50</span>px<span class="token punctuation">;</span>

<span class="token property">background-size</span><span class="token punctuation">:</span> <span class="token number">50</span>px <span class="token number">50</span>px<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">50</span>px<span class="token punctuation">;</span></code></pre>
<p>或者指定</p>
<pre class=" language-css"><code class="language-css"><span class="token property">background-size</span><span class="token punctuation">:</span> contain<span class="token punctuation">;</span></code></pre>
<h5 id="21-移动端提高可点区域范围"><a href="#21-移动端提高可点区域范围" class="headerlink" title="21.移动端提高可点区域范围"></a>21.移动端提高可点区域范围</h5><p>移动端的的一些图标如 X，可能会设计得比较小，所以点起来会不太好点，因此要提高可点区域范围，可通过增加<code>padding</code>，如下代码：</p>
<pre class=" language-css"><code class="language-css"><span class="token number">.</span>icon-close &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> abosulte<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<h5 id="22-长时间按住页面出现闪退"><a href="#22-长时间按住页面出现闪退" class="headerlink" title="22.长时间按住页面出现闪退"></a>22.长时间按住页面出现闪退</h5><pre class=" language-css"><code class="language-css">element &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-touch-callout</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<h5 id="23-旋转屏幕时，字体大小调整的问题"><a href="#23-旋转屏幕时，字体大小调整的问题" class="headerlink" title="23.旋转屏幕时，字体大小调整的问题"></a>23.旋转屏幕时，字体大小调整的问题</h5><pre class=" language-css"><code class="language-css">html,
body,
form,
fieldset,
p,
div,
h<span class="token number">1</span>,
h<span class="token number">2</span>,
h<span class="token number">3</span>,
h<span class="token number">4</span>,
h<span class="token number">5</span>,
h<span class="token number">6</span> &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-text-size-adjust</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<h5 id="24-IOS中input键盘事件keyup、keydown、keypress支持不是很好"><a href="#24-IOS中input键盘事件keyup、keydown、keypress支持不是很好" class="headerlink" title="24.IOS中input键盘事件keyup、keydown、keypress支持不是很好"></a>24.<code>IOS</code>中<code>input</code>键盘事件<code>keyup</code>、<code>keydown</code>、<code>keypress</code>支持不是很好</h5><p>问题是这样的，用<code>input search</code>做模糊搜索的时候，在键盘里面输入关键词，会通过<code>ajax</code>后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用 input 监听键盘<code>keyup</code>事件，在安卓手机浏览器中是可以的，但是在<code>ios</code>手机浏览器中变红很慢，用输入法输入之后，并未立刻相应<code>keyup</code>事件，只有在通过删除之后才能相应！</p>
<h4 id="解决办法："><a href="#解决办法：" class="headerlink" title="解决办法："></a>解决办法：</h4><p>可以用<code>html5</code>的<code>oninput</code>事件去代替<code>keyup</code></p>
<input type="text" id="testInput">
<script type="text/javascript">
  document.getElementById('testInput').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>

<p>然后就达到类似<code>keyup</code>的效果！</p>
<h4 id="25-li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？"><a href="#25-li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？" class="headerlink" title="25.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？"></a>25.<code>li</code>与<code>li</code>之间有看不见的空白间隔是什么原因引起的？有什么解决办法？</h4><blockquote>
<p>引起这种空白间隔的原因：浏览器的默认行为是把<code>inline</code>元素间的空白字符（空格换行<code>tab</code>）渲染成一个空格，也就是我们上面的代码</p>
</blockquote>
<p>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。</p>
<h4 id="解决方案："><a href="#解决方案：" class="headerlink" title="解决方案："></a>解决方案：</h4><p>方法一： 既然是因为<code>&lt;li&gt;</code>换行导致的，那就可以将<code>&lt;li&gt;</code>代码全部写在一排，如下</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>li标签空白测试<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>part1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>part2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>part3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>part4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>再刷新页面看就没有空白了，就是这么神奇~</p>
<p>方法二： 我们为了代码美观以及方便修改，很多时候我们不可能将<code>&lt;li&gt;</code>全部写在一排，那怎么办？既然是空格占一个字符的宽度，那我们索性就将</p>
<p>内的字符尺寸直接设为 0，将下面样式放入样式表，问题解决。</p>
<pre class=" language-css"><code class="language-css"><span class="token number">.</span>wrap ul &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">0</span>px<span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<p>但随着而来的就是</p>
<p>中的其他文字就不见了，因为其尺寸被设为<code>0px</code>了，我们只好将他们重新设定字符尺寸。</p>
<p>方法三： 本来以为方法二能够完全解决问题，但经测试，将<code>li</code>父级标签字符设置为 0 在<code>Safari</code>浏览器依然出现间隔空白；既然设置字符大小为 0 不行，那咱就将间隔消除了，将下面代码替换方法二的代码，目前测试完美解决。同样随来而来的问题是<code>li</code>内的字符间隔也被设置了，我们需要将<code>li</code>内的字符间隔设为默认</p>
<pre class=" language-css"><code class="language-css"><span class="token number">.</span>wrap ul &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">letter-spacing</span><span class="token punctuation">:</span> -<span class="token number">5</span>px<span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<p>之后记得设置 li 内字符间隔</p>
<pre class=" language-css"><code class="language-css"><span class="token number">.</span>wrap ul li &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">letter-spacing</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
``


#### <span class="token number">26.</span> 移动端适配`<span class="token number">1</span>px`的问题

### 前言

在移动端web开发中，UI设计稿中设置边框为<span class="token number">1</span>像素，前端在开发过程中如果出现<span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span>px，测试会发现在retina屏机型中，<span class="token number">1</span>px会比较粗，即是较经典的移动端<span class="token number">1</span>px像素问题。

本文默认你已经对视口、物理像素、逻辑像素、设备像素比、css像素等移动端基本概念已经了解。
产生原因

#### 设备像素比：
dpr=window<span class="token number">.</span>devicePixelRatio，也就是设备的物理像素与逻辑像素的比值。
在retina屏的手机上, dpr为<span class="token number">2</span>或<span class="token number">3</span>，css里写的<span class="token number">1</span>px宽度映射到物理像素上就有<span class="token number">2</span>px或<span class="token number">3</span>px宽度。
例如：iPhone<span class="token number">6</span>的dpr为<span class="token number">2</span>，物理像素是<span class="token number">750</span>（x轴）,它的逻辑像素为<span class="token number">375</span>。也就是说，<span class="token number">1</span>个逻辑像素，在x轴和y轴方向，需要<span class="token number">2</span>个物理像素来显示，即：dpr=<span class="token number">2</span>时，表示<span class="token number">1</span>个CSS像素由<span class="token number">4</span>个物理像素点组成，如下图所示：

![]<span class="token punctuation">(</span><span class="token property">https</span><span class="token punctuation">:</span>//yangyunhaiimagesoss<span class="token number">.</span>oss-cn-shanghai<span class="token number">.</span>aliyuncs<span class="token number">.</span>com/<span class="token number">2010211637</span>_<span class="token number">1603269450142.640</span>[<span class="token number">1</span>]<span class="token punctuation">)</span>

#### 伪类+transform 实现
原理：把原先元素的border去掉，然后利用<span class="token punctuation">:</span>before或者<span class="token punctuation">:</span>after重做border，并 transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位。
```css
<span class="token comment" spellcheck="true">/*手机端实现真正的一像素边框*/</span>
<span class="token number">.</span>border-<span class="token number">1</span>px, <span class="token number">.</span>border-bottom-<span class="token number">1</span>px, <span class="token number">.</span>border-top-<span class="token number">1</span>px, <span class="token number">.</span>border-left-<span class="token number">1</span>px, <span class="token number">.</span>border-right-<span class="token number">1</span>px &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/*线条颜色 黑色*/</span>
<span class="token number">.</span><span class="token property">border-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after,
<span class="token number">.</span><span class="token property">border-bottom-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after,
<span class="token number">.</span><span class="token property">border-top-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after,
<span class="token number">.</span><span class="token property">border-left-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after,
<span class="token number">.</span><span class="token property">border-right-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#000</span><span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/*底边边框一像素*/</span>
<span class="token number">.</span><span class="token property">border-bottom-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">1</span>px<span class="token punctuation">;</span>
  <span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/*上边边框一像素*/</span>
<span class="token number">.</span><span class="token property">border-top-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">1</span>px<span class="token punctuation">;</span>
  <span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/*左边边框一像素*/</span>
<span class="token number">.</span><span class="token property">border-left-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">1</span>px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
  <span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/*右边边框1像素*/</span>
<span class="token number">.</span><span class="token property">border-right-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">1</span>px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
  <span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/*边框一像素*/</span>
<span class="token number">.</span><span class="token property">border-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid gray<span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/*设备像素比*/</span>
<span class="token comment" spellcheck="true">/*显示屏最小dpr为2*/</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span> &amp;#123<span class="token punctuation">;</span></span>
  <span class="token number">.</span><span class="token property">border-bottom-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after,
  <span class="token number">.</span><span class="token property">border-top-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  &amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

  <span class="token number">.</span><span class="token property">border-left-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after,
  <span class="token number">.</span><span class="token property">border-right-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  &amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

  <span class="token number">.</span><span class="token property">border-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200%</span><span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">200%</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span>
  &amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/*设备像素比*/</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span><span class="token punctuation">:</span> 3<span class="token punctuation">)</span> &amp;#123<span class="token punctuation">;</span></span>
  <span class="token number">.</span><span class="token property">border-bottom-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after,
  <span class="token number">.</span><span class="token property">border-top-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span><span class="token number">0.333</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  &amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

  <span class="token number">.</span><span class="token property">border-left-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after,
  <span class="token number">.</span><span class="token property">border-right-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span><span class="token number">0.333</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  &amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>

  <span class="token number">.</span><span class="token property">border-1px</span><span class="token punctuation">:</span><span class="token punctuation">:</span>after &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">300%</span><span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">300%</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">0.333</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span>
  &amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<p>需要注意<code>&lt;input type=&quot;button&quot;&gt;</code>是没有:before, :after 伪元素的</p>
<h4 id="优点："><a href="#优点：" class="headerlink" title="优点："></a>优点：</h4><p>所有场景都能满足，支持圆角(伪类和本体类都需要加 border-radius)。</p>
<h4 id="缺点："><a href="#缺点：" class="headerlink" title="缺点："></a>缺点：</h4><p>代码量也很大，对于已经使用伪类的元素(例如 clearfix)，可能需要多层嵌套。</p>
<h3 id="27-介绍flex布局"><a href="#27-介绍flex布局" class="headerlink" title="27. 介绍flex布局"></a>27. 介绍<code>flex</code>布局</h3><p>flex 布局可以帮我们快速布局一些区块,实现你想要的效果,不用再去 float,position 之类的.我们在布局网页的时候很多时候都是一些特殊布局,flex 就能帮我快速去布局,不需要去定位.</p>
<p>任何一个盒子都可以指定为 flex 布局,但是要注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。</p>
<p><img src="https://yangyunhaiimagesoss.oss-cn-shanghai.aliyuncs.com/2010211646_1603269990228.640[1]"></p>
<h3 id="28-css方式设置垂直居中"><a href="#28-css方式设置垂直居中" class="headerlink" title="28.css方式设置垂直居中"></a>28.<code>css</code>方式设置垂直居中</h3><h3 id="Flex-布局"><a href="#Flex-布局" class="headerlink" title="Flex 布局"></a>Flex 布局</h3><pre class=" language-css"><code class="language-css"><span class="token property">display</span><span class="token punctuation">:</span> flex  <span class="token comment" spellcheck="true">/*设置Flex */</span>
<span class="token property">justify-content</span><span class="token punctuation">:</span> center <span class="token comment" spellcheck="true">/* 主轴对齐 */</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> center     <span class="token comment" spellcheck="true">/* 侧轴 */</span></code></pre>
<p>flex 布局是平四开发中非常常用的，虽然面试官想要一大堆方法，但是 flex 是最常用的，如果对此理解不够深入建议重学一下</p>
<h3 id="定位实现"><a href="#定位实现" class="headerlink" title="定位实现"></a>定位实现</h3><pre class=" language-css"><code class="language-css"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span> auto<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* 水平居中 */</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* 绝对定位 */</span>
<span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">50%</span><span class="token punctuation">;</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-<span class="token number">50%</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>注：这里第一行实现了水平居中， 剩余几行实现了垂直方向的居中，对 css3 transform 了解不深者建议学习一下相关知识，这里也可以使用 margin-top： -w/2 前提是需要知道 w 是多少，n 是需要居中元素的宽度, 也可以去掉 margin 全部用定位实现，代码如下</p>
<pre class=" language-css"><code class="language-css"><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">50%</span><span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">50%</span><span class="token punctuation">;</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-<span class="token number">50%</span><span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-<span class="token number">50%</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h3 id="29-display-none和visibility-hidden的区别"><a href="#29-display-none和visibility-hidden的区别" class="headerlink" title="29. display:none和visibility:hidden的区别?"></a>29. <code>display:none</code>和<code>visibility:hidden</code>的区别?</h3><h4 id="display-none"><a href="#display-none" class="headerlink" title="display:none"></a>display:none</h4><p>隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢， 就当他从来不存在。</p>
<h4 id="visibility-hidden"><a href="#visibility-hidden" class="headerlink" title="visibility:hidden"></a>visibility:hidden</h4><p>隐藏对应的元素，但是在文档布局中仍保留原来的空间。</p>
<h3 id="30-如何解决a标点击后hover事件失效的问题"><a href="#30-如何解决a标点击后hover事件失效的问题" class="headerlink" title="30.如何解决a标点击后hover事件失效的问题?"></a>30.如何解决<code>a</code>标点击后<code>hover</code>事件失效的问题?</h3><p>改变 a 标签 css 属性的排列顺序</p>
<p>只需要记住 LoVe HAte 原则就可以了：</p>
<pre class=" language-css"><code class="language-css">link→visited→hover→active</code></pre>
<p>比如下面错误的代码顺序：</p>
<pre class=" language-css"><code class="language-css"><span class="token property">a</span><span class="token punctuation">:</span>hover &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
<span class="token property">a</span><span class="token punctuation">:</span>visited &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token comment" spellcheck="true">/* visited在hover后面，这样的话hover事件就失效了 */</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<p>正确的做法是将两个事件的位置调整一下。</p>
<p><code>a:link</code>：未访问时的样式，一般省略成</p>
<p><code>a:visited</code>：已经访问后的样式</p>
<p><code>a:hover</code>：鼠标移上去时的样式</p>
<p><code>a:active</code>：鼠标按下时的样式</p>
<h4 id="31-怎么做移动端适配"><a href="#31-怎么做移动端适配" class="headerlink" title="31.怎么做移动端适配"></a>31.怎么做移动端适配</h4><h2 id="写在前面"><a href="#写在前面" class="headerlink" title="写在前面"></a>写在前面</h2><ul>
<li>css 像素：代码中使用的逻辑像素，衡量页面上的内容大小</li>
<li>设备像素：即物理像素，控制设备显示的单位，与设备、硬件有关</li>
<li>设备独立像素：与设备无关的逻辑像素，不同于设备像素（物理像素），不是真实存在的。</li>
<li>设备像素比：定义设备像素与设备独立像素比的关系 window.devicePixelRatio）设备像素比=物理像素/设备独立像素</li>
<li>分辨率：指的是屏幕上垂直和水平的总物理像素</li>
</ul>
<p>好像面试问移动端适配还挺多的，在网上查找了很多资料（侵删），总结一下：</p>
<ol>
<li>px + viewport 适配</li>
<li>rem 布局</li>
</ol>
<ul>
<li>CSS3 媒体查询适配</li>
<li>基于设计图的 rem 布局</li>
<li>基于屏幕百分比的 rem 布局</li>
<li>小程序的 rpx 布局</li>
</ul>
<ol start="3">
<li>vw 布局</li>
</ol>
<ul>
<li>通过媒体查询的方式即 CSS3 的 meida queries</li>
<li>以天猫首页为代表的 flex 弹性布局</li>
<li>以淘宝首页为代表的 rem+viewport 缩放</li>
<li>rem 方式</li>
</ul>
<h2 id="一、px-viewport-适配"><a href="#一、px-viewport-适配" class="headerlink" title="一、px + viewport 适配"></a>一、px + viewport 适配</h2><p>通过动态设置<code>meta</code>标签的<code>viewport</code>让<code>css</code>中的<code>1px</code>等于设备的<code>1px</code>。</p>
<p>首先我们必须要了解到 viewport 是什么，viewport 是用户的网页可视区域。手机浏览器就是页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的窗口比屏幕宽，这样就不会破坏没有针对手机浏览器优化的网页的布局（不会把每个网页挤到很小的窗口中）。用户可以通过平移和缩放来看网页的不同部分。</p>
<p>通常 viewport 是指视窗、视口，浏览器上(也可能是一个 app 中的 webview)用来显示网页的那部分区域。在移动端和 pc 端视口是不同的，pc 端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口</p>
<h3 id="布局视口："><a href="#布局视口：" class="headerlink" title="布局视口："></a>布局视口：</h3><p>在浏览器窗口 css 的布局区域，布局视口的宽度限制 css 布局的宽。为了能在移动设备上正常显示那些为 pc 端浏览器设计的网站，移动设备上的浏览器都会把自己默认的 viewport 设为 980px 或其他值，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现横向滚动条的情况</p>
<h3 id="视觉视口："><a href="#视觉视口：" class="headerlink" title="视觉视口："></a>视觉视口：</h3><p>用户通过屏幕看到的页面区域，通过缩放查看显示内容的区域，在移动端缩放不会改变布局视口的宽度，当缩小的时候，屏幕覆盖的 css 像素变多，视觉视口变大，当放大的时候，屏幕覆盖的 css 像素变少，视觉视口变小。</p>
<h3 id="理想视口："><a href="#理想视口：" class="headerlink" title="理想视口："></a>理想视口：</h3><p>一般来讲，这个视口其实不是真实存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。</p>
<p>设置理想视口就在 header 中加入这样一行代码：</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span>
  <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span>
  <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width,user-scalable<span class="token punctuation">=</span>no,initial-scale<span class="token punctuation">=</span>1.0,  maximum-scale<span class="token punctuation">=</span>1.0,minimum-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span></code></pre>
<h2 id="二、rem-布局"><a href="#二、rem-布局" class="headerlink" title="二、rem 布局"></a>二、rem 布局</h2><h3 id="1-CSS3媒体查询适配-meida-queries"><a href="#1-CSS3媒体查询适配-meida-queries" class="headerlink" title="1.CSS3媒体查询适配 meida queries"></a>1.<code>CSS3</code>媒体查询适配 <code>meida queries</code></h3><p>通过查询设备的宽度来执行不同的 <code>css</code> 代码，最终达到界面的配置</p>
<pre class=" language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> screen and <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span>&amp;#123<span class="token punctuation">;</span></span>
    <span class="token number">....</span>适配iphone<span class="token number">4</span>的css样式
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
<span class="token atrule"><span class="token rule">@media</span> screen and <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 375px<span class="token punctuation">)</span>&amp;#123<span class="token punctuation">;</span></span>
     <span class="token number">....</span>适配iphone<span class="token number">6</span>/<span class="token number">7</span>/<span class="token number">8</span>的css样式
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
<span class="token atrule"><span class="token rule">@media</span> screen and <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 414px<span class="token punctuation">)</span>&amp;#123<span class="token punctuation">;</span></span>
    <span class="token number">....</span>适配iphone<span class="token number">6</span>/<span class="token number">7</span>/<span class="token number">8</span> plus的css样式
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span>
<span class="token number">......</span></code></pre>
<h3 id="优点：-1"><a href="#优点：-1" class="headerlink" title="优点："></a>优点：</h3><p>media query 可以做到设备像素比的判断，方法简单，成本低，特别是对 移动和 PC 维护同一套代码的时候。目前像 Bootstrap 等框架使用这种方式 布局<br>方法简单，只需修改 css 文件<br>调整屏幕宽度时不用刷新页面就可以响应页面布局</p>
<h3 id="缺点：-1"><a href="#缺点：-1" class="headerlink" title="缺点："></a>缺点：</h3><p>代码量大，不方便维护<br>不能够完全适配所有的屏幕尺寸，需要编写多套 css 样式<br>为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源<br>为了兼顾移动端和 PC 端各自响应式的展示效果，难免会损失各自特有的交互方式</p>
<h3 id="2-基于设计图的-rem-布局"><a href="#2-基于设计图的-rem-布局" class="headerlink" title="2.基于设计图的 rem 布局"></a>2.基于设计图的 rem 布局</h3><p>通常我们拿到的设计图宽度的是 750 也就是基于 iphone6/7/8 的设计图，我们如果要想让 1px 像素等于设计图的 1px 该怎么做呢？</p>
<p>其实很简单，直接让根元素的 font-size: 0.5px 即可（因为是 2 倍图，1px 等于 2 实际像素，所以为 0.5px）。但是市面上的机型不一定都是 750px 的，这个时候我们就要进行等比缩放了。</p>
<pre class=" language-javaScript"><code class="language-javaScript">html.fontSize = clientWidth / 750;</code></pre>
<p>还有一个小问题，平常开发都是基于谷歌 chorme 开发的，chrome 并不支持 font-size 小于 12 的字体。所以可以让 font-size 大于 12，在以上基础上将结果放大 100 倍，然后写样式的时候再除以 100。嗯~看到这里我觉得很绕啊，不过开始放在这里了。<br>js 伪代码：</p>
<pre class=" language-javaScript"><code class="language-javaScript">html.fontSize = (clientWidth / 750) * 100;</code></pre>
<p>样式：</p>
<pre class=" language-css"><code class="language-css"><span class="token number">.</span>element &amp;<span class="token hexcode">#123</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">0.1</span>rem<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* 实际到6/7/8上就是10px */</span>
&amp;<span class="token hexcode">#125</span><span class="token punctuation">;</span></code></pre>
<h2 id="3-基于屏幕百分比的-rem-布局"><a href="#3-基于屏幕百分比的-rem-布局" class="headerlink" title="3.基于屏幕百分比的 rem 布局"></a>3.基于屏幕百分比的 rem 布局</h2><p>这种方式是给元素设置百分比，例如 2 个 div 想占满宽度 100%，那么一个 div 设置宽度为 50%，这样不固定宽度，使得在不同的分辨率下都能达到适配。<br>   各子元素或属性的百分比设定计算：</p>
<p>1.子元素 width、height 的百分比:子元素的 width 或 height 中使用百分比，是相对于子元素的直接父元素</p>
<p>2.margin 和 padding 的百分比：在垂直方向和水平方向都是相对于直接父亲元素的 width，而与父元素的 height 无关</p>
<p>3.border-radius 的百分比：border-radius 的百分比是相对于自身宽度，与父元素无关</p>
<h4 id="优点：-2"><a href="#优点：-2" class="headerlink" title="优点："></a>优点：</h4><p>宽度自适应，在不同的分辨率下都能达到适配</p>
<h4 id="缺点：-2"><a href="#缺点：-2" class="headerlink" title="缺点："></a>缺点：</h4><p>百分比的值不好计算<br>需要确定父级的大小，因为要根据父级的大小进行计算 各个属性中如果使用百分比，相对父元素的属性并不是唯一的<br>高度不好设置，一般需要固定高度</p>
<h3 id="4-小程序的-rpx-布局"><a href="#4-小程序的-rpx-布局" class="headerlink" title="4. 小程序的 rpx 布局"></a>4. 小程序的 rpx 布局</h3><p>小程序有个 rpx 可以根据屏幕自适应。官方文档的介绍：可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素，也就是说，它内部的实现原理其实和基于设计图的 rem 布局的原理差不多。</p>
<p>只不过小程序内部处理了一下，让 rpx 直接能够根据屏幕宽度自适应，而不是像 rem 那样依赖于根元素的 font-size.</p>
<h2 id="三、VM-布局"><a href="#三、VM-布局" class="headerlink" title="三、VM 布局"></a>三、VM 布局</h2><p>css3 中引入与视口有关的新的单位 vw 和 vh，vw 表示相对于视口的宽度，vh 表示相对于视口高度。<br>在这里插入图片描述<br>那么问题来了，平时我们拿到的设计图都是基于 px 标记的，怎么将 px 转为 vw 呢？<br>vw 单位换算：视口宽度为 100vw 占满整个视口区域，那么 1vw 相当于占整个视口宽度的 1%，所以 1px= 1/375*100 vw<br>所有的页面元素都可以直接进行计算换算成 vw 单位，但是这样计算和百分比方案计算比较类似，都会比较麻烦。</p>
<p>但是有一个比较厉害的插件—— postcss-px-to-viewport，可以预处理 css,将 px 单位转换为 vw 单位，但是需要进行一些相关的 webpack 配置。详情可看上方链接官方配置解释。</p>
<pre class=" language-javaScript"><code class="language-javaScript">&#123;
    loader: 'postcss-loader',
    options: &#123;
        plugins: ()=>[
            require('autoprefixer')(&#123;
                browsers: ['last 5 versions']
            &#125;),
            require('postcss-px-to-viewport')(&#123;
                viewportWidth: 375,
                viewportHeight: 1334,
                unitPrecision: 3,
                viewportUnit: 'vw',
                selectorBlackList: ['.ignore', '.hairlines'],
                minPixelValue: 1,
                mediaQuery: false
            &#125;)
        ]
&#125;</code></pre>
<h3 id="优点：-3"><a href="#优点：-3" class="headerlink" title="优点："></a>优点：</h3><p>指定 vw\vh 相对与视口的宽高，由 px 换算单位成 vw 单位比较简单<br>通过 postcss-px-to-viewport 插件进行单位转换比较方便</p>
<h3 id="缺点：-3"><a href="#缺点：-3" class="headerlink" title="缺点："></a>缺点：</h3><p>直接进行单位换算时百分比可能出现小数,计算不方便</p>
<p>兼容性- 大多数浏览器都支持、ie11 不支持</p>
<p>少数低版本手机系统 ios8、android4.4 以下不支持</p>
<h3 id="32-浏览器兼容写法"><a href="#32-浏览器兼容写法" class="headerlink" title="32.浏览器兼容写法?"></a>32.浏览器兼容写法?</h3><h4 id="moz"><a href="#moz" class="headerlink" title="-moz-"></a>-moz-</h4><p>火狐等使用 Mozilla 浏览器引擎的浏览器</p>
<h4 id="webkit"><a href="#webkit" class="headerlink" title="-webkit-"></a>-webkit-</h4><p>Safari, 谷歌浏览器等使用 Webkit 引擎的浏览器</p>
<h4 id="o"><a href="#o" class="headerlink" title="-o-"></a>-o-</h4><p>Opera 浏览器(早期)</p>
<h4 id="ms"><a href="#ms" class="headerlink" title="-ms-"></a>-ms-</h4><p>Internet Explorer (不一定)</p>
<h4 id="为什么需要浏览器引擎前缀-Vendor-Prefix-？"><a href="#为什么需要浏览器引擎前缀-Vendor-Prefix-？" class="headerlink" title="为什么需要浏览器引擎前缀(Vendor Prefix)？"></a>为什么需要浏览器引擎前缀(Vendor Prefix)？</h4><blockquote>
<p>这些浏览器引擎前缀(Vendor Prefix)主要是各种浏览器用来试验或测试新出现的 CSS3 属性特征。可以总结为以下 3 点：</p>
</blockquote>
<ol>
<li>试验一些还未成为标准的的 CSS 属性——也许永远不会成为标准</li>
<li>对新出现的标准的 CSS3 属性特征做实验性的实现</li>
<li>对 CSS3 中一些新属性做等效语义的个性实现</li>
</ol>

                
            </div>
            <hr/>

            



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/pride-blog/tags/%E6%AF%8F%E5%A4%A9%E4%B8%80%E4%B8%AA%E7%A6%BB%E8%81%8C%E5%B0%8F%E6%8A%80%E5%B7%A7/">
                                    <span class="chip bg-color">每天一个离职小技巧</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/pride-blog/libs/share/css/share.min.css">
<div id="article-share">

    

    

</div>

                </div>
            </div>
            
        </div>
    </div>

    

    

    

    

    

    

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;上一篇</div>
            <div class="card">
                <a href="/pride-blog/2021/080441516.html">
                    <div class="card-image">
                        
                        
                        <img src="/pride-blog/medias/featureimages/3.jpg" class="responsive-img" alt="javaScript">
                        
                        <span class="card-title">javaScript</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i>2021-08-04
                        </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/pride-blog/categories/%E6%AF%8F%E5%A4%A9%E4%B8%80%E4%B8%AA%E7%A6%BB%E8%81%8C%E5%B0%8F%E6%8A%80%E5%B7%A7/" class="post-category">
                                    每天一个离职小技巧
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/pride-blog/tags/%E6%AF%8F%E5%A4%A9%E4%B8%80%E4%B8%AA%E7%A6%BB%E8%81%8C%E5%B0%8F%E6%8A%80%E5%B7%A7/">
                        <span class="chip bg-color">每天一个离职小技巧</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                下一篇&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/pride-blog/2021/080441513.html">
                    <div class="card-image">
                        
                        
                        <img src="/pride-blog/medias/featureimages/0.jpg" class="responsive-img" alt="浏览器的相关的一些知识">
                        
                        <span class="card-title">浏览器的相关的一些知识</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2021-08-04
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/pride-blog/categories/%E6%AF%8F%E5%A4%A9%E4%B8%80%E4%B8%AA%E7%A6%BB%E8%81%8C%E5%B0%8F%E6%8A%80%E5%B7%A7/" class="post-category">
                                    每天一个离职小技巧
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/pride-blog/tags/%E6%AF%8F%E5%A4%A9%E4%B8%80%E4%B8%AA%E7%A6%BB%E8%81%8C%E5%B0%8F%E6%8A%80%E5%B7%A7/">
                        <span class="chip bg-color">每天一个离职小技巧</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>



<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/pride-blog/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/pride-blog/libs/codeBlock/codeLang.js"></script>


<!-- 代码块复制 -->

<script type="text/javascript" src="/pride-blog/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/pride-blog/libs/codeBlock/codeShrink.js"></script>


    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget card" style="background-color: white;">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;目录</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>


<script src="/pride-blog/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            collapseDepth: Number('0'),
            headingSelector: 'h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>

    

</main>




    <footer class="page-footer bg-color">
    

    <div class="container row center-align"
         style="margin-bottom: 0px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            
                <span id="year">2021-2023</span>
            
            <span id="year">2021</span>
            <a href="/pride-blog/about" target="_blank">zihao xiong</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            
            
            
            
            <br>

            <!-- 运行天数提醒. -->
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link ">














</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    var searchFunc = function (path, search_id, content_id) {
        'use strict';
        $.ajax({
            url: path,
            dataType: "xml",
            success: function (xmlResponse) {
                // get the contents from search data
                var datas = $("entry", xmlResponse).map(function () {
                    return {
                        title: $("title", this).text(),
                        content: $("content", this).text(),
                        url: $("url", this).text()
                    };
                }).get();
                var $input = document.getElementById(search_id);
                var $resultContent = document.getElementById(content_id);
                $input.addEventListener('input', function () {
                    var str = '<ul class=\"search-result-list\">';
                    var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                    $resultContent.innerHTML = "";
                    if (this.value.trim().length <= 0) {
                        return;
                    }
                    // perform local searching
                    datas.forEach(function (data) {
                        var isMatch = true;
                        var data_title = data.title.trim().toLowerCase();
                        var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                        var data_url = data.url;
                        data_url = data_url.indexOf('/') === 0 ? data.url : '/' + data_url;
                        var index_title = -1;
                        var index_content = -1;
                        var first_occur = -1;
                        // only match artiles with not empty titles and contents
                        if (data_title !== '' && data_content !== '') {
                            keywords.forEach(function (keyword, i) {
                                index_title = data_title.indexOf(keyword);
                                index_content = data_content.indexOf(keyword);
                                if (index_title < 0 && index_content < 0) {
                                    isMatch = false;
                                } else {
                                    if (index_content < 0) {
                                        index_content = 0;
                                    }
                                    if (i === 0) {
                                        first_occur = index_content;
                                    }
                                }
                            });
                        }
                        // show search results
                        if (isMatch) {
                            str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                            var content = data.content.trim().replace(/<[^>]+>/g, "");
                            if (first_occur >= 0) {
                                // cut out 100 characters
                                var start = first_occur - 20;
                                var end = first_occur + 80;
                                if (start < 0) {
                                    start = 0;
                                }
                                if (start === 0) {
                                    end = 100;
                                }
                                if (end > content.length) {
                                    end = content.length;
                                }
                                var match_content = content.substr(start, end);
                                // highlight all keywords
                                keywords.forEach(function (keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
                                });

                                str += "<p class=\"search-result\">" + match_content + "...</p>"
                            }
                            str += "</li>";
                        }
                    });
                    str += "</ul>";
                    $resultContent.innerHTML = str;
                });
            }
        });
    };

    searchFunc('/pride-blog/search.xml', 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/pride-blog/libs/materialize/materialize.min.js"></script>
    <script src="/pride-blog/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/pride-blog/libs/aos/aos.js"></script>
    <script src="/pride-blog/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/pride-blog/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/pride-blog/js/matery.js"></script>

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/pride-blog/libs/others/clicklove.js" async="async"></script>
    
    

    

    

    <!--腾讯兔小巢-->
    
    
    <script type="text/javascript" color="0,0,255"
        pointColor="0,0,255" opacity='0.7'
        zIndex="-1" count="99"
        src="/pride-blog/libs/background/canvas-nest.js"></script>
    

    
    
    <script type="text/javascript" size="150" alpha='0.6'
        zIndex="-1" src="/pride-blog/libs/background/ribbon-refresh.min.js" async="async"></script>
    

    
    <script type="text/javascript" src="/pride-blog/libs/background/ribbon-dynamic.js" async="async"></script>
    

    
    <script src="/pride-blog/libs/instantpage/instantpage.js" type="module"></script><!-- hexo-inject:begin --><!-- hexo-inject:end -->
    

</body>
<script src="./../source/js/cursor.js"></script>

</html>
